<template>
	<view>
		<!-- 导航栏 -->
		<view class="flex justify-between align-center mainBgColor pos-f" style="height: 44px; left: 0; right: 0; top: 0; z-index: 9;">
			<view class="flex align-center" style="padding: 0 8px;">
				<u-icon name="arrow-left" size="21" color="#ffffff" @click="toBack()"></u-icon>
			</view>
			
			<view class="font-16 color-white font-b-800">
				<text>更换申请记录</text>
				<text v-if="total !== 0">({{ total }})</text>
			</view>
			
			<view class="flex align-center mar-r-10" @click="handleOpenSearch()">
				<text class="iconfont icon-shaixuan color-white" style="font-size: 20px;"></text>
				<text v-if="screen.count !== 0" class="color-white font-18" style="margin-top: -1px;">({{ screen.count }})</text>
			</view>
		</view>
		
		<u-sticky bgColor="#fff">
			<u-tabs
				:current="current"
				:list="tabs"
				@click="handleTab"
			></u-tabs>
		</u-sticky>
		
		<view style="padding-top: 44px;">
			<view
				v-for="(item, index) in list"
				:key="index"
				class="bg-white pad-10 mar-x-10 mar-t-10"
				@click="toDetails(item)"
			>
				<view class="flex justify-between align-center font-14">
					<view class="font-b-800">
						<text>申请单号：</text>
						<text>{{ item.terminalRno }}</text>
					</view>
					
					<view>
						<text>申请时间：</text>
						<text>{{ item.renewalDate }}</text>
					</view>
				</view>
				
				<view class="font-14 mar-y-10">
					<text>车号：</text>
					<text>{{ item.vehicleNumber }}</text>
				</view>
				
				<Lines w="100%" h="1px" bg="#e6e6e6" />
				
				<view class="flex justify-between align-center font-14 mar-t-10">
					<view>
						<text>客户：</text>
						<text>{{ item.cname }}</text>
					</view>
					
					<view v-if="current === 0" class="color-ff0000">
						<text>{{ item.auditStep }}</text>
					</view>
				</view>
			</view>
		</view>
	
		<!-- 页面加载 -->
		<view v-if="loading" class="mar-t-20">
			<u-loading-icon :loading="loading" text="加载中..." mode="circle" color="#1e9fff" textColor="#1e9fff" fontSize="16px"></u-loading-icon>
		</view>
		
		<!-- 空数据 -->
		<view v-if="total === 0 && !loading" class="mar-t-100">
			<u-empty
				mode="data"
				text="~暂无数据"
			></u-empty>
		</view>
		
		<view v-if="!loading && list.length === total && total > 0" class="flex justify-center mar-t-40 pad-b-20 color-999999">
			<text>~ 没有更多数据了</text>
		</view>
		
		<!-- 筛选条件弹窗 -->
		<CustomPopUp
			:show="screen.show"
			title="筛选"
			popupWidth="100%"
			popupHeight="210px"
			popupRadius="0px"
			direction="top"
		>
			<view slot="content" class="pad-x-10 pad-b-10">
				<view>
					<view class="flex align-center">
						<text>开始日期：</text>
						<u-input v-model="screen.startDate" :readonly="screen.isRead" placeholder="请选择开始日期" @focus="showSelectStartDate(1)"></u-input>
					</view>
					
					<view class="flex align-center mar-t-10">
						<text>结束开期：</text>
						<u-input v-model="screen.endDate" :readonly="screen.isRead" placeholder="请选择结束日期" @focus="showSelectStartDate(2)"></u-input>
					</view>
				</view>
				
				<view class="flex justify-between mar-t-20">
					<view class="flex flex-1 text-nowrap">
						<u-button @click="handleResetSearch()">重 置</u-button>
						<u-button class="mar-x-10" @click="handleCloseSearch()">关 闭</u-button>
					</view>
					
					<view class="flex-2">
						<u-button type="primary" @click="handleSearch()">确 定</u-button>
					</view>
				</view>
			</view>
		</CustomPopUp>
		
		<!-- 开始、结束日期下拉选择控件 -->
		<u-datetime-picker
			ref="datetimePicker"
			v-model="dates.time"
			:show="dates.show"
			mode="datetime"
			:formatter="formatter"
			@confirm="handleSelectDate"
			@cancel="handleCloseSelectDate"
		></u-datetime-picker>
	</view>
</template>

<script>
	import CustomPopUp from '@/components/CustomPopUp/index'
	import Utils from '@/utils/utils'
	import Lines from '@/components/Lines/index'
	
	import { mapState } from 'vuex'
	import { checkLogin, getSystemDate } from '@/utils/lib'
	import { getApplyForRecords } from '@/apis/replaceApplyForRecords/index'
	
	export default {
		components: {
			Lines,
			CustomPopUp,
		},
		
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
				userInfo: state => state.user.userInfo,
			}),
		},
		
		watch: {
			'screen.startDate': {
				handler(newVal, oldVal) {
					if (!oldVal) {
						if (newVal) {
							this.screen.count += 1
						} else {
							this.screen.count = this.screen.count - 1
						}
					} else {
						if (!newVal) {
							this.screen.count = this.screen.count - 1
						}
					}
				}
			},
			
			'screen.endDate': {
				handler(newVal, oldVal) {
					if (!oldVal) {
						if (newVal) {
							this.screen.count += 1
						} else {
							this.screen.count = this.screen.count - 1
						}
					} else {
						if (!newVal) {
							this.screen.count = this.screen.count - 1
						}
					}
				}
			}
		},
		
		data() {
			return {
				current: 0, // 当前选中项索引
				tabs: [
					{ name: '待审核' },
					{ name: '已驳回' },
					{ name: '已同意' },
				],
				
				list: [], // 列表
				loading: false, // 加载状态
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				// 筛选
				screen: {
					show: false,
					count: 0,
					startDate: '',
					endDate: '',
					isRead: false,
					isTime: null, // startDate,endDate,null
					initStartDate: '',
					initEndDate: '',
				},
				
				// 日期选择控件
				dates: {
					show: false,
					time: Number(new Date()),
				},
			}
		},
		
		onShow() {
			checkLogin()
			this.list = []
			this.findList()
		},
		
		methods: {
			// 切换 tab
			handleTab(item) {
				if (item.index ===  this.current) return
				this.currentPage = 1
				this.list = []
				this.current = item.index
				this.total = 0
				this.findList()
			},
			
			// 查询列表
			findList() {
				let terminalState = 1
				
				if (this.current === 0) {
					terminalState = 1
				} else if (this.current === 1) {
					terminalState = 3
				} else if (this.current === 2) {
					terminalState = 2
				}
				
				let params = {
					token: this.token,
					terminalState,
					sDate: this.screen.startDate,
					eDate: this.screen.endDate,
					outletName: this.userInfo.OrgName
				}
				
				this.loading = true
				
				getApplyForRecords(params).then(res => {
					this.loading = false
					this.list = res.Result
					this.total = res.Result.length
				}).catch(err => {
					this.loading = false
				})
			},
			
			// 跳转到更换申请记录详情页
			toDetails(row) {
				uni.navigateTo({
					url: `/pages/gsExceptionHandling/details/details?id=${ row.terminalRno }`
				})
			},
		
			// 点击筛选打开条件下拉弹窗
			handleOpenSearch() {
				this.screen.initStartDate = JSON.parse(JSON.stringify(this.screen.startDate))
				this.screen.initEndDate = JSON.parse(JSON.stringify(this.screen.endDate))
				this.screen.show = true
			},
			
			// 重置搜索条件
			handleResetSearch() {
				this.screen.isRead = false
				this.screen.startDate = ''
				this.screen.endDate = ''
			},
			
			// 关闭条件下拉弹窗
			handleCloseSearch() {
				this.screen.startDate = this.screen.initStartDate
				this.screen.endDate = this.screen.initEndDate
				this.screen.initStartDate = ''
				this.screen.initEndDate = ''
				this.screen.show = false
			},
			
			// 选择开始日期
			showSelectStartDate(flag) {
				this.screen.isRead = true
				
				if (flag === 1) {
					this.screen.isTime = 'startDate'
				} else if (flag === 2) {
					this.screen.isTime = 'endDate'
				}
				
				this.dates.show = true
			},
			
			// 格式化日期
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				
				if (type === 'month') {
					return `${value}月`
				}
				
				if (type === 'day') {
					return `${value}日`
				}
				
				// if (type === 'hour') {
				// 	return `${value}点`
				// }
				
				// if (type === 'minute') {
				// 	return `${value}分`
				// }
				
				return value
			},
			
			// 选择日期
			handleSelectDate() {
				setTimeout(() => {
					let date = getSystemDate(this.dates.time, 'yyyy/MM/dd HH:mm')
					
					if (this.screen.isTime === 'startDate') {
						this.screen.startDate = date
					} else if (this.screen.isTime === 'endDate') {
						this.screen.endDate = date
					}
					
					this.handleCloseSelectDate()
				}, 0)
			},
			
			// 关闭选择服务日期弹窗
			handleCloseSelectDate() {
				this.screen.isTime = null
				this.screen.isRead = false
				this.dates.time = Number(new Date())
				this.dates.show = false
			},
			
			// 搜索
			handleSearch() {
				this.findList()
				this.screen.initStartDate = ''
				this.screen.initEndDate = ''
				this.screen.show = false
			},
			
			// 返回上一页
			toBack() {
				uni.navigateBack({ delta: 1 })
			},
		}
	}
</script>

<style scoped>
/deep/ .u-tabs__wrapper__nav__item{
    flex: 110% !important;
}
</style>
